<template>
  <div class="saech_filer_box">
    <el-form
      ref="form"
      :model="searchForm"
      label-position="top"
      label-width="auto"
      :inline="false"
      size="small"
    >
      <el-row :gutter="20">
        <el-col :span="24" :offset="0">筛选</el-col>
        <el-col :span="24" :offset="0">
          <el-form-item label="任务号" prop="taskNumber">
            <el-input
              v-model="searchForm.taskNumber"
              placeholder="请输入"
              clearable
              size="small"
            />
            <!-- <el-select
              v-model="searchForm.taskNumber"
              size="small"
              class="w100"
              placeholder="请选择"
              clearable
              filterable
            >
              <el-option
                v-for="item in tableDataUniqBy('taskNumber')"
                :key="item.taskNumber"
                :label="item.taskNumber"
                :value="item.taskNumber"
              /> -->
            <!-- </el-select> -->
          </el-form-item></el-col
        >
        <el-col :span="24" :offset="0">
          <el-form-item label="零件号" prop="partNumber">
            <el-select
              v-model="searchForm.partNumber"
              size="small"
              class="w100"
              placeholder="请选择"
              clearable
              filterable
            >
              <el-option
                v-for="item in tableDataUniqBy('partNumber')"
                :key="item.partNumber"
                :label="item.partNumber"
                :value="item.partNumber"
              />
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="24" :offset="0">
          <el-form-item label="批次号" prop="batchNumber">
            <el-select
              v-model="searchForm.batchNumber"
              size="small"
              class="w100"
              placeholder="请选择"
              clearable
              filterable
            >
              <el-option
                v-for="item in tableDataUniqBy('batchNumber')"
                :key="item.batchNumber"
                :label="item.batchNumber"
                :value="item.batchNumber"
              />
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="24" :offset="0">
          <el-form-item label="工序号" prop="processNumber">
            <el-select
              v-model="searchForm.processNumber"
              size="small"
              class="w100"
              placeholder="请选择"
              clearable
              filterable
            >
              <el-option
                v-for="item in tableDataUniqBy('processNumber')"
                :key="item.processNumber"
                :label="item.processNumber"
                :value="item.processNumber"
              />
            </el-select> </el-form-item
        ></el-col>
        <!-- <el-col :span="24" :offset="0">
          <el-form-item label="工步号" prop="stepNumber">
            <el-select
              v-model="searchForm.stepNumber"
              size="small"
              class="w100"
              placeholder="请选择"
              clearable
              filterable
            >
              <el-option
                v-for="item in tableDataUniqBy('stepNumber')"
                :key="item.stepNumber"
                :label="item.stepNumber"
                :value="item.stepNumber"
              />
            </el-select> </el-form-item
        ></el-col> -->
        <el-col :span="24" :offset="0">
          <el-form-item label="状态" prop="stateList">
            <el-select
              v-model="searchForm.stateList"
              class="w100"
              placeholder="请选择"
              clearable
              filterable
              multiple
            >
              <!-- 初始 合炉 分炉 转炉 派工 结束 -->
              <el-option key="初始" label="初始" value="初始" />
              <!-- <el-option key="选定" label="选定" value="选定" /> -->
              <el-option key="合炉" label="合炉" value="合炉" />
              <el-option key="分炉" label="分炉" value="分炉" />
              <!-- <el-option key="转炉" label="转炉" value="转炉" />
              <el-option key="结束" label="结束" value="结束" /> -->
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" :offset="0">
          <el-form-item label="日期：">
            <el-date-picker
              class="w100"
              v-model="dateArr"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              align="right"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '00:00:00']"
              size="mini"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="search_btns flex-x flex-space">
      <el-button style="width: 49%" class="reset" size="mini" @click="reSet"
        >重置</el-button
      >
      <el-button
        style="width: 49%"
        class="submit"
        size="mini"
        type="primary"
        @click="submitForm"
        >提交</el-button
      >
    </div>
  </div>
</template>

<script>
import { getTemplate } from "@/api/technology";
import _ from "lodash";
import { currentDate3 } from "@/utils/currentDate";
export default {
  props: {
    dataAll: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dateArr: [],
      searchForm: {
        batchNumber: "",
        partNumber: "",
        processNumber: "",
        startDate: "",
        endDate: "",
        // startDate: currentDate(),
        // endDate: currentDate({
        //   hours: 23,
        //   minute: 59,
        //   second: 59,
        // }),
        stateList: ["初始", "合炉", "分炉"]
      }
    };
  },
  computed: {
    tableDataUniqBy() {
      return function(key = "processNumber") {
        return _.uniqBy(this.dataAll, key);
      };
    }
  },
  mounted() {},
  methods: {
    // 重置
    reSet() {
      this.searchForm = {
        batchNumber: "",
        partNumber: "",
        processNumber: "",
        startDate: "",
        endDate: "",
        // startDate: currentDate(),
        // endDate: currentDate({
        //   hours: 23,
        //   minute: 59,
        //   second: 59,
        // }),
        stateList: ["初始", "合炉", "分炉"]
      };
      this.dateArr = [];
      this.$emit("setFilterList");
    },
    submitForm() {
      if (
        this.searchForm.processNumber ||
        this.searchForm.partNumber ||
        this.searchForm.batchNumber ||
        this.searchForm.stateList ||
        this.dateArr.length
      ) {
        this.$emit("setFilterList", {
          ...this.searchForm,
          startDate: this.dateArr.length ? currentDate3(this.dateArr[0]) : "",
          endDate: this.dateArr.length ? currentDate3(this.dateArr[1]) : ""
        });
      } else {
        this.$emit("setFilterList");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.saech_filer_box {
  position: relative;
  height: 100%;
  /deep/.el-form-item {
    margin-bottom: 10px;
    .el-form-item__label {
      padding-bottom: 0 !important;
    }
  }
  .search_btns {
    width: 100%;
    position: absolute;
    bottom: 0;
    padding: 10px;
    left: 0;
  }
}
</style>
